<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>臧博艺个人主页</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/templatemo-style.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        
        <div id="home" class="carousel slide carousel-fade" data-ride="carousel">

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
                <div class="item active">
                    <div class="item-1"></div>
                    <div class="carousel-caption">
                        <div class="container">
                            <div class="col-md-offset-2 col-md-8 col-sm-12">
                                <h2>Welcome to boyi home</h2>
                                <p><strong><span class="green">template</span><span class="yellow">**</span></strong>** Please tell your friends about me web. Thank you.</p>
                                <a href="#" class="button default">Details</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="item-2"></div>
                    <div class="carousel-caption">
                        <div class="container">
                            <div class="col-md-offset-2 col-md-8 col-sm-12">
                                <h2>Responsive Design</h2>
                                <p>Credit goes to <a rel="nofollow" href="#"><span class="yellow">Unsplash</span></a> for images used in this template. Vivamus sed mauris ut libero tristique ultricies. Suspendisse sagittis eget augue vel condimentum. Sed malesuada tortor venenatis enim blandit interdum.</p>
                                <a href="#" class="button default">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="item-3"></div>
                    <div class="carousel-caption">
                        <div class="container">
                            <div class="col-md-offset-2 col-md-8 col-sm-12">
                                <h2>Mobile Ready</h2>
                                <p>Donec malesuada pellentesque cursus. In vestibulum metus sit amet est elementum, et malesuada mi consequat. Sed ultricies lectus sit amet venenatis condimentum. Morbi hendrerit posuere enim at aliquet.</p>
                                <a href="#" class="button default">Let's talk</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >免费模板</a></div>
            <!-- SLIDER OPTIONS -->
            <div class="slider-options">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-xs-4 slider-nav">
                            <!-- Controls -->
                            <a class="left carousel-control" href="#home" role="button" data-slide="prev">
                                <span class="fa fa-angle-left"></span>
                            </a>
                            <a class="right carousel-control" href="#home" role="button" data-slide="next">
                                <span class="fa fa-angle-right"></span>
                            </a>
                        </div>

                        <div class="col-md-4 col-sm-4 col-xs-4">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#home" data-slide-to="0" class="active"></li>
                                <li data-target="#home" data-slide-to="1"></li>
                                <li data-target="#home" data-slide-to="2"></li>
                            </ol>
                        </div>

                        <div class="col-md-4 col-sm-4 text-right col-xs-4">
                            <a href="#" id="scroll-to-content" class="go-down"><i class="fa fa-angle-down"></i></a>
                        </div>

                    </div>
                </div>
            </div>

        </div> <!-- Carousel -->


        <nav id="navigation">
            <div class="navbar navbar-default navbar-static-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <i class="fa fa-bars"></i>
                        </button>
                        <a class="navbar-brand" href="index.html">臧博艺</a>
                    </div>
                    <div class="navbar-collapse collapse">

                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#home" class="current">Home</a></li>
                            <li><a href="#about">About</a></li>
                            <li><a href="#gallery">Project</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>

                    </div><!--/.nav-collapse -->
                </div><!--/.container -->
            </div><!--navbar-default-->
        </nav><!--navigation section end here-->


        <section id="about" class="page-section first-section">
            <div class="container">
                <div class="row page-heading">
                    <div class="col-md-8 col-sm-8">
                        <h3 class="page-title">About Me</h3>
                        <p class="page-subtitle">LEARN MORE ABOUT ME AND MY EXPERIENCE</p>
                    </div>
                    <div class="col-md-4 col-sm-4 hidden-xs page-icon-holder">
                        <p class="page-icon"><i class="fa fa-user"></i></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="profile-image">
                            <img src="img/10.jpg" width="370" height="280" alt="">
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="profile-content">
                            <h4>臧博艺</h4>
                            <span>Web Designer</span>
                            <p>Pellentesque elementum, lacus sit amet hendrerit posuere, quam quam tristique nisi, nec ornare ligula magna id nisl. Donec blandit enim ac semper facilisis. Curabitur eu laoreet mauris, eget fermentum velit.</p>
                            <ul class="social-icons">
                                <li><a href="#" class="fa fa-facebook"></a></li>
                                <li><a href="#" class="fa fa-twitter"></a></li>
                                <li><a href="#" class="fa fa-linkedin"></a></li>
                                <li><a href="#" class="fa fa-rss"></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12 col-xs-12">
                        <div class="my-skills">
                            <h4>My Skills</h4>
                            <p>Etiam ac nisi sed velit tempor facilisis. Aenean pellentesque mollis metus, non tincidunt odio maximus nec. Praesent felis ex, elementum sed lobortis.</p>
                            <ul class="progess-bars">
                                <li>
                                    <span>html 85%</span>
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"></div>
                                    </div>
                                </li>
                                <li>
                                    <span>css 95%</span>
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;"></div>
                                    </div>
                                </li>
                                <li>
                                    <span>javascript 40%</span>
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <section id="gallery" class="page-section">
            <div class="container">
                <div class="row page-heading">
                    <div class="col-md-8 col-sm-8">
                        <h3 class="page-title">My Gallery</h3>
                        <p class="page-subtitle">CHECK SOME OF MY LAST PROJECTS</p>
                    </div>
                    <div class="col-md-4 col-sm-4 hidden-xs text-right">
                        <p class="page-icon"><i class="fa fa-camera"></i></p>
                    </div>
                </div>
                <div class="row">
                    <div class="gallery-holder">
                        <div class="col-md-3 col-sm-6 col-xs-12 gallery-item">
                            <div class="gallery-thumb">
                                <img src="img/1.jpg" alt="">
                                <div class="hover">
                                    <a href="#" class="fa fa-plus"></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 col-xs-12 gallery-item">
                            <div class="gallery-thumb">
                                <img src="img/2.jpg" alt="">
                                <div class="hover">
                                    <a href="#" class="fa fa-plus"></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 col-xs-12 gallery-item">
                            <div class="gallery-thumb">
                                <img src="img/3.jpg" alt="">
                                <div class="hover">
                                    <a href="#" class="fa fa-plus"></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 col-xs-12 gallery-item">
                            <div class="gallery-thumb">
                                <img src="img/4.jpg" alt="">
                                <div class="hover">
                                    <a href="#" class="fa fa-plus"></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 col-xs-12 gallery-item">
                            <div class="gallery-thumb">
                                <img src="img/5.jpg" alt="">
                                <div class="hover">
                                    <a href="#" class="fa fa-plus"></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 col-xs-12 gallery-item">
                            <div class="gallery-thumb">
                                <img src="img/6.jpg" alt="">
                                <div class="hover">
                                    <a href="#" class="fa fa-plus"></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 col-xs-12 gallery-item">
                            <div class="gallery-thumb">
                                <img src="img/7.jpg" alt="">
                                <div class="hover">
                                    <a href="#" class="fa fa-plus"></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 col-xs-12 gallery-item">
                            <div class="gallery-thumb">
                                <img src="img/8.jpg" alt="">
                                <div class="hover">
                                    <a href="#" class="fa fa-plus"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <section id="contact" class="page-section">
            <div class="container">
                <div class="row page-heading">
                    <div class="col-md-8 col-sm-8">
                        <h3 class="page-title">Contact Me</h3>
                        <p class="page-subtitle">FEEL FREE TO SEND A MESSAGE</p>
                    </div>
                    <div class="col-md-4 col-sm-4 hidden-xs text-right">
                        <p class="page-icon"><i class="fa fa-envelope"></i></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-9 col-sm-12">
                        <div class="row">
                            <form action="#" method="post" class="contact-form">
                                <fieldset class="col-md-4 col-sm-6 col-xs-12">
                                    <input type="text" id="name" placeholder="Name...">
                                </fieldset>
                                <fieldset class="col-md-4 col-sm-6 col-xs-12">
                                    <input type="email" id="email" placeholder="Email...">
                                </fieldset>
                                <fieldset class="col-md-4 col-sm-12 col-xs-12">
                                    <input type="text" id="subject" placeholder="Subject...">
                                </fieldset>
                                <fieldset class="col-md-12 col-sm-12 col-xs-12">
                                    <textarea name="message" id="message" cols="30" rows="6" placeholder="Message..."></textarea>
                                </fieldset>
                                <fieldset class="col-md-12 col-sm-12 col-xs-12">
                                    <input type="submit" class="button default" value="Send Message">
                                </fieldset>
                            </form>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12">
                        <div class="contact-info">
                            <h4>Contact Information</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius aliquam diam, ac cursus enim. Ut interdum leo mattis varius pulvinar.</p>
                            <ul class="social-icons">
                                <li><a href="#" class="fa fa-facebook"></a></li>
                                <li><a href="#" class="fa fa-twitter"></a></li>
                                <li><a href="#" class="fa fa-linkedin"></a></li>
                                <li><a href="#" class="fa fa-rss"></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        

        <footer class="site-footer">
            <div class="container">
                <div class="text-center">
                    <a href="#" class="go-top"><i class="fa fa-angle-up"></i></a>
                    <p class="copyright-text">Copyright &copy; boyi <!--<a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>-->
                </div>
            </div>
        </footer>

        <script src="js/vendor/jquery-1.10.2.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/min/plugins.min.js"></script>
        <script src="js/min/main.min.js"></script>

    </body>
</html>
